<!--新增功能，上半部分表单-->
<template>
  <div class="upload-multi-box">
    <!-- 图片 删除 重新上传 -->
    <!-- 上传 以及二维码-->
    <div class="uplod_box">
      <div
        v-if="!isViewMode"
        class="uploader-wrapper">
        <el-upload
          v-bind="imgAttr"
          class="dialog-upload"
          action="string"
          :accept="acceptList"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :http-request="toRequest"
        >
          <el-image
            v-if="imagesurlstr"
            fit="cover"
            :src="imagesurlstr" />
          <div class="tip-box">
            <div class="tip-uploader">
              <i class="el-icon-plus"/>
              <!-- <img
                src="../../assets/img/upload.png"
                alt> -->
              <!-- <div class="uploadText">上传附件</div> -->
              <!-- <i class="el-icon-plus avatar-uploader-icon" /> -->
            </div>
            <p>支持jpg/png/pdf/word/excel,10M以内</p>
          </div>
        </el-upload>
      </div>
      <!-- <div class="qrcode-upload-box">
        <m-upload
          v-if="!isViewMode"
          action="uploadUrl"
          :m-props="{urlObj:qrcodeImg,urlStr:'url'}"
          :on-success="handleAvatarSuccess"
          :before-upload="startAvatarUpload"
          :http-request="toRequest"
        />
      </div> -->
    </div>
    <div class="file-list-boc">
      <div
        v-for="(item, index) in imagesurlarr"
        :key="index"
        class="file-box"
      >
        <!-- 图片 -->
        <!-- <el-tooltip  v-viewer effect="dark" content="点击预览" placement="top-start"> -->
        <!-- <el-button>上左</el-button> -->
        <div
          class="file-img-box"
          v-if="item.type === 'jpg' || item.type === 'png'">
          <div v-viewer>
            <el-image
              class="file-img"
              fit="cover"
              :src="item.url" />
          </div>
          <el-button
            type="text"
            @click="toDownload(item.url)">下载</el-button>
        </div>

        <!-- </el-tooltip> -->

        <!-- word -->
        <div
          class="file-document"
          v-if="fileType.includes(item.type)">
          <i class="el-icon-document"/>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.name"
            placement="top">
            <p>{{ item.name }}</p>
          </el-tooltip>
          <el-button
            type="text"
            @click="toDownload(item.url)">下载</el-button>
        </div>
        <!-- pdf -->
        <div
          class="file-pdf"
          v-if="item.type === 'pdf'">
          <i class="el-icon-tickets"/>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.name"
            placement="top">
            <p>{{ item.name }}</p>
          </el-tooltip>
          <div>
            <el-button
              type="text"
              @click="toPreview(item.url)">预览</el-button>
            <el-button
              type="text"
              @click="toDownload(item.url)">下载</el-button>
          </div>

        </div>
        <!-- <a :href="item">附件{{ index+1 }}.{{ item.substring(item.lastIndexOf('.') + 1) }}</a> -->
        <!-- <el-image fit="cover" :src="item" class="image-item" /> -->
        <span
          class="delete-icon"
          @click="deleteImg(index)">
          <i class="el-icon-error" />
        </span>
      </div>
    </div>

  </div>
</template>

<script>
import { fileUpload } from '../../const/api.js'
import { without } from 'lodash'
import { setImmediate } from 'timers'
// 文件上传限制 ------- 图片类型
const imageLimit = 'image/'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 接收多张
    imgsrcarr: {
      type: Array,
      default: () => []
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型, 1 为多张图片
    uptype: {
      type: String,
      default: '1'
    },
    // 上传属性
    attr: {
      type: Object,
      default: () => {}
    },
    max: {
      // 最大可上传的张数
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 上传的地址
      uploadUrl: fileUpload,
      // 多张上传的图片地址
      imagesurlarr: this.imgsrcarr || [],
      // 单张
      imagesurlstr: this.imgsrc || '',
      // 上传属性
      imgAttr: {},
      qrcodeImg: {
        url: ''
      },
      // 支持jpg/png/pdf/word/excel,10M以内
      acceptList: '.pdf,.jpg, .png, .doc, .docx, .xls, .xlsx',
      fileType: 'doc,docx,xls,xlsx'
    }
  },
  computed: {
    isViewMode () {
      return this.imgAttr.disabled
    }
  },
  methods: {
    //   删除文件
    deleteImg (index) {
      this.imagesurlarr.splice(index, 1)
      this.$emit('returnImgUrl', this.imagesurlarr, this.key)
    },
    // 下载文件
    toDownload (url) {
      window.open(url)
    },
    toPreview (url) {
      this.$pdfViewer({ url: url, title: 'PDF预览' })
    },
    // 上传图片成功 本地图片地址
    handleAvatarSuccess (res, file) {
      this.localImgurl = URL.createObjectURL(file.raw)
    },
    // 图片上传前
    startAvatarUpload (file) {
      // 条件拦截
      this.uploadActon(file, 'produce')
    },
    // 点击上传
    // beforeUpload (file) {
    //   // 图片拦截
    //   let name = file.name.split('.')[1]
    //   if(name){
    //     name = name.toLowerCase()
    //   }
    //   const isFormat = this.acceptList.includes(name)
    //   if (!isFormat) {
    //     this.$message.error('上传文件只能PDF/JPG/PNG/DOC/DOCX/XLS/XLSX格式!')
    //     return false
    //   }
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isLt10M) {
    //     this.$message.error('上传文件大小不能超过 10MB!')
    //     return false
    //   }
    // },
    toRequest (data) {
      let fullName = data.file.name
      let name = data.file.name.split('.')[1]
      if (name) {
        name = name.toLowerCase()
      }
      const isFormat = this.acceptList.includes(name)
      if (!isFormat) {
        this.$message.error('上传文件只能PDF/JPG/PNG/DOC/DOCX/XLS/XLSX格式!')
        return false
      }
      const isLt10M = data.file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
      if (this.imagesurlarr.length === this.max) {
        this.$message.warning(`最多只支持上传${this.max}个文件！`)
        return
      }
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        this.$message({ type: 'success', message: '上传成功' })
        // 赋值上传后的地址给文档
        const currentImgUrl = res.data.payload
        let obj = {
          type: name,
          name: fullName,
          url: currentImgUrl
        }
        if (this.type === '1') {
          this.imagesurlarr.push(obj)
          this.$emit('returnImgUrl', this.imagesurlarr, this.key)
        } else {
          this.imagesurlstr = res.data.payload
          this.$emit('returnImgUrl', this.imagesurlstr, this.key)
        }
      })
    }
  },
  watch: {
    imgsrc: {
      immediate: true,
      handler (val) {
        this.imagesurlstr = val
      }
    },
    imgsrcarr: {
      handler (val) {
        this.imagesurlarr = val
      },
      immediate: true
    },
    attr: {
      immediate: true,
      handler (val) {
        this.imgAttr = val
      }
    },
    'qrcodeImg.url' (val) {
      if (!val) return
      if (this.imagesurlarr.length === this.max) {
        this.$message.warning(`最多只支持上传${this.max}张图片！`)
        return
      }
      this.imagesurlarr.push(val)
      this.qrcodeImg.url = ''
    }
  }
}
</script>

<style lang="less">
.upload-multi-box {
  // display: flex;
  // flex-flow: row wrap;
  // position: relative;
  width: 100%;
  .uploader-wrapper {
    // position: relative;
    width: 250px;
    // padding: 5px;
    // display: flex;
    // justify-content: center;
    .tip-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #aaa;
      padding: 10px;
      p {
        font-size: 12px;
      }
      .tip-uploader {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        color: #2371c5;
        // 上传样式修改
        img {
          width: 20px;
          height: 20px;
        }
        .uploadText {
          font-size: 16px;
          color: #929396;
          margin-left: 10px;
        }
      }
    }
  }
  // 上传以及二维码
  .uplod_box {
    position: relative;
    // display: flex;
  }
  // 二维码
  // .qrcode-upload-box {
  //   position: absolute;
  //   top: 10px;
  //   left: 200px;
  //   .el-button.is-circle {
  //     border-radius: 0;
  //   }
  //   .el-button--primary {
  //     color: #2371c5;
  //     background-color: #fff;
  //   }
  //   .el-button--primary:hover {
  //     color: #fff;
  //     background-color: #2371c5;
  //   }
  //   .el-button--medium.is-circle {
  //     padding: 5px;
  //   }
  // }
  .image-wrapper-corver {
    // display: flex;
    // height: 36px;
    // flex-wrap: wrap;
    // margin-left: 5px;
    .image-wrapper {
      // display: inline-block;
    }
  }
  .image-wrapper {
    // position: relative;
    // width: 180px;
    // height: 130px;
    // margin: 10px;
    // padding: 10px;
    // border: 1px dashed #cdd2dc;
    // padding-right: 43px;
    // display: flex;
    // // flex-flow: row nowrap;
    // justify-content: center;
    // align-items: center;
    // img {
    //   width: 130px;
    //   height: 130px;
    // }
    // .delete-icon {
    //   display: none;
    // }
    // &:hover {
    //   .delete-icon {
    //     display: inline;
    //     position: absolute;
    //     top: 1px;
    //     right: 10px;
    //     font-size: 18px;
    //     color: #cdd2dc;
    //     &:hover {
    //       color: fade(#2371c5, 60%);
    //       cursor: pointer;
    //     }
    //   }
    // }
    // &.view-only {
    //   border: 1px solid #cdd2dc;
    //   &:hover {
    //     .delete-icon {
    //       display: none;
    //     }
    //   }
    // }
  }
  .file-list-boc {
    display: flex;
    flex-wrap: wrap;
    .file-box {
      padding: 10px;
      border: 1px dotted;
      margin-bottom: 10px;
      margin-right: 10px;
      height: 140px;
      position: relative;
      .file-img-box {
        width: 80px;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .file-img {
          width: 80px;
          height: 75px;
        }
      }
      .file-document {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          font-size: 60px;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80px;
          text-align: center;
        }
      }
      .file-pdf {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          font-size: 60px;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80px;
          text-align: center;
        }
      }
      .delete-icon {
        position: absolute;
        right: -9px;
        top: -15px;
        i {
          font-size: 20px;
          color: red;
        }
      }
    }
  }
}
</style>
